<template>
	<view class='tabbar'>
		<view 
			class='tab' 
			v-for="(item,index) in tabbrList" 
			:key='index'
			@tap='navigatorTos(item.pagePath)'
		 >
			<image v-if=' item.pagePath === currentPage ' :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class='text'>{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{currentPage:{
			type:String,
			default:"index"
		}},
		data(){
			return{
				tabbrList: [
			{
				"pagePath": "index",
				"iconPath": "/static/tabber/index.png",
				"selectedIconPath": "/static/tabber/indexSelected.png",
				"text": "首页"
			},
			{
				"pagePath": "list",
				"iconPath": "/static/tabber/list.png",
				"selectedIconPath": "/static/tabber/listSelected.png",
				"text": "分类"
			},
			{
				"pagePath": "shopcart",
				"iconPath": "/static/tabber/shop.png",
				"selectedIconPath": "/static/tabber/shopSelected.png",
				"text": "购物车"
			},
			{
				"pagePath": "my",
				"iconPath": "/static/tabber/my.png",
				"selectedIconPath": "/static/tabber/mySelected.png",
				"text": "我的"
			}
		]
			}
		},
		methods:{
			navigatorTos(e){
				if(e==this.currentPage)return;	//防止同一页面重复跳转
				if(e=='shopcart' || e=="my"){
				this.navigateTo({
					url:`../../pages/${e}/${e}`,
					
				})
			}else{
				uni.redirectTo({
					url:`../../pages/${e}/${e}`
				})
			}
		}
		}
	}
</script>

<style scoped>
.tabbar{
	border-top:1rpx solid #636263;
	background-color: #FFFFFF;
	z-index: 9999;
	position: fixed;
	left:0;
	bottom:0;
	width:100%;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.tab{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
image{
	width: 60rpx;
	height: 60rpx;
}
.text{
	padding:10rpx 0;
	font-size:24rpx;
}
</style>
